import React, { createRef, memo, useEffect } from 'react'
import * as echarts from 'echarts';


export default memo(function YTChart() {

    const tableRef = createRef();
    //Echarts相关
    const initEcharts = () => {
        const myChart = echarts.init(tableRef.current);
        // const chartsData
        const option = {
            title:{
                left:'center',
                text:'访问量统计'
            },
            xAxis:{
                type:'category',
                boundaryGap:false,  //坐标轴两边的留白策略
                name:'访问时间',
                data:[1,2,3,4,5,6]

            },
            yAxis:{
                type:'value',
                boundaryGap:[0, '100%'],
                name:'访问量'
            },
            series: [{
                name: '访问量统计',
                type:'line',
                symbol:'none', //标记的图形
                sampling:'lttb',
                itemStyle: {
                    color:'rgb(255,70,131)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                      },
                      {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                      }
                    ])
                  },
                data: [0.12, 0.23, 0.55, 0.94, 0.54, 0.89, 0.99]
            }]
        }

        myChart.setOption(option);
    }


    useEffect(() => {
        initEcharts();
    })
    return (
        <div>
            {/* 表格数据 */}
            <div ref={tableRef}/>
        </div>
    )
})
